<template>
	<view class="app">
		<view class="search-div"><u-search @custom="searchList" placeholder="请输入用户名" v-model="params.name" @search="searchList"></u-search></view>
		<u-gap height="120rpx"></u-gap>
		<view class="">
			<u-list @scrolltolower="scrolltolower" :scrollIntoView="o_id" height="calc(100vh - 120rpx)">
				<u-list-item v-for="(item, index) in List" :key="index" :id="'o_' + index">
					<view class="u-p-32 content-box">
						<view class=" u-flex">
							<view class="u-flex-3">
								<view class="u-m-b-20">
									<text>用户名:</text>
									<text>{{ item.name }}</text>
								</view>
								<view class="u-m-b-20">
									<text>上级用户:</text>
									<text>{{ item.p_name }}</text>
								</view>
								<view class="u-m-b-20">
									<text>联系号码:</text>
									<text>{{ item.mobile }}</text>
								</view>

								<view>
									<text>状态:</text>
									<text>{{ item.status_text }}</text>
								</view>
							</view>
						</view>
						<u-line margin="20rpx 0"></u-line>
						<view class="btn u-flex">
							<u-button shape="circle" customStyle="width:160rpx;margin:0 10rpx" size="small" type="primary" @click="EditapplyHandle(item, index)">通过</u-button>
							<u-button shape="circle" customStyle="width:160rpx;margin:0 10rpx" size="small" type="primary" @click="refuseapply(item, index)">拒绝</u-button>
						</view>
					</view>
				</u-list-item>
				<u-loadmore @loadmore="getDataList" :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
			</u-list>
		</view>
		<u-popup :show="show" @close="show=false">
			<u-form ref="invoiceListRef" :model="editInvoiceList" label-width="80px" class="u-p-20">
				<u-form-item label="用户名">
					<text>{{ detail.name }}</text>
				</u-form-item>
				<u-form-item label="上级分销" @click="openselect">
					<u-input readonly v-model="detail.p_name" placeholder="选择上级分销">
						<template slot="suffix">
							<u-icon name="arrow-down"></u-icon>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item label="联系号码"><u-input v-model="detail.mobile"></u-input></u-form-item>
				<u-form-item label="分销等级" @click="show_grade = true">
					<u-input readonly v-model="grade_name" placeholder="选择分销等级">
						<template slot="suffix">
							<u-icon name="arrow-down"></u-icon>
						</template>
					</u-input>
				</u-form-item>
			</u-form>
			<view class="u-flex u-flex-items-center footer">
				<u-button size="small" shape="circle" @click="show = false">关闭</u-button>
				<u-button class="u-m-l-60" type="primary" size="small" shape="circle" @click="saveData">确定</u-button>
			</view>
		</u-popup>
		<u-popup :show="show_select"  @close="show_select=false" mode="top"><selectagent @close="close" :s_id="select_id" @change="getselect"></selectagent></u-popup>
		<u-picker :show="show_grade" :columns="gradelist" keyName="name" @confirm="getexgrade"></u-picker>
		<u-modal :show="show_model" @cancel="show_model = false" :showCancelButton="true" content="是否拒绝？" @confirm="refuse"></u-modal>
		<lc-fab-touch ref="fab" :content="contents" horizontal="right" vertical="bottom" direction="horizontal" @trigger="trigger" />
		
	</view>
</template>
<script>
import selectagent from './components/selectagent.vue';
export default {
	data() {
		return {
			params: {
				name: ''
			},
			page: 1,
			size: 10,
			objTemp: {},
			isLoading: false,
			List: [],
			status: 'loadmore',
			loadingText: '努力加载中',
			loadmoreText: '上拉或点击加载更多',
			nomoreText: '实在没有了',
			show_model: false,
			content: '',
			btnList: [
				{
					name: '全部'
				},
				{
					name: '未审核'
				},
				{
					name: '已通过'
				},
				{
					name: '驳回'
				}
			],
			options: [
				{
					value: 2,
					label: '已通过'
				},
				{
					value: 3,
					label: '驳回'
				}
			],
			btn_type: -1,
			editInvoiceList: {},
			show: false,
			show_select: false,
			show_grade: false,
			detail: '',
			select_id: 0,
			gradelist: [],
			grade_name: '',
			o_id: '',
			contents: [
				{
					iconPath: 'arrow-up',
					selectedIconPath: 'arrow-up',
					text: '顶部',
			
					active: false
				},
				{
					iconPath: 'home',
					selectedIconPath: 'home-fill',
					text: '首页',
					active: false
				}
			],
		};
	},
	components: {
		selectagent
	},
	onLoad() {
		this.searchList();
		this.getagentgradelist();
	},
	onPullDownRefresh() {
		this.searchList();
		this.getagentgradelist();
	},
	methods: {
		trigger(e) {
			if (e.index == 0) {
				this.o_id = '';
				this.$nextTick(() => {
					this.o_id = 'o_0';
				});
			} else if (e.index == 1) {
				uni.$u.route({
					url: 'pages/index/index'
				});
			}
		},
		refuseapply(item, index) {
			this.index = index;
			this.show_model = true;
		},
		refuse() {
			let id = this.List[this.index].id;
			let data = {
				id: id,
				status: 2,
				update_time: this.List[this.index].update_time
			};
			uni.$u.http
				.put('/madmin/agent/apply/' + id, data,{custom:{id:25}})
				.then(res => {
					this.List.splice(this.index, 1);
					this.show_model = false;
				})
				.catch(err => {});
		},
		getexgrade(e) {
			this.grade_name = e.value[0].name;
			this.detail.grade_id = e.value[0].id;
			this.show_grade = false;
		},
		getagentgradelist() {
			uni.$u.http
				.post('/madmin/agent/grade/list', {},{custom:{id:25}})
				.then(res => {
					this.gradelist = [res.msg];
				})
				.catch(err => {});
		},
		scrolltolower() {
			this.getDataList();
		},
		changelist(id) {
			uni.$u.http
				.get('/shop/invoice/manage/read', {params: {id: id},custom:{id:25}})
				.then(res => {
					let detail = res.msg;
					// this.List[this.index] = detail;
					this.List[this.index].status = detail.status;
					this.List[this.index].update_time = detail.update_time;

					this.show = false;
				})
				.catch(err => {});
		},

		//查询数据
		searchList() {
			//复制查询对象
			this.objTemp = {...this.params};
			this.List = [];
			this.page = 1;
			this.getDataList();
		},
		//查询数据本体
		getDataList() {
			this.isLoading = true;
			uni.$u.http
				.post('/madmin/agent/apply/list?page=' + this.page + '&size=10', this.objTemp,{custom:{id:25}})
				.then(res => {
					this.isLoading = false;
					uni.stopPullDownRefresh();
					let json = res.msg;
					if (json.data.length > 0) {
						this.page++;
						let list = json.data;

						this.List = this.List.concat(list);
					} else {
						this.status = 'nomore';
					}
				})
				.catch(e => {
					this.isLoading = false;
				});
		},
		EditapplyHandle(item, index) {
			this.index = index;
			this.detail = item;
			this.show = true;
		},
		// 提交审核
		saveData() {
			let forms = {
				user_id: this.detail.user_id,
				name: this.detail.name,
				p_name: this.detail.p_name,
				pid: this.detail.pid || 0,
				mobile: this.detail.mobile,
				status: 1,
				grade_id: this.detail.grade_id,
				apply_id: this.detail.id,
				update_time: this.detail.update_time
			};
			uni.$u.http.post('/madmin/agent', forms,{custom:{id:25}}).then(res => {
				this.List.splice(this.index, 1);
				this.show = false;
			});
		},
		clickTabs(data) {
			let index = data.index;
			this.obj.status = index;

			this.searchList();
		},
		getselect(data) {
			if (data) {
				this.detail.p_id = data.user_id;
				this.detail.p_name = data.name;
			}
			this.show_select = false;
		},
		openselect() {
			this.select_id = this.detail.p_id || 0;
			this.show_select = true;
		},
		close(){
			this.show_select=false
		}
	}
};
</script>
<style lang="scss">
.content-box {
	margin: 20rpx auto;
	position: relative;
	font-size: 28rpx;
}
.search-box {
	width: 520rpx;
}
.tabs-div {
	top: 0;
}
</style>
